<template>
  <GroupOperationBar
    class="py-5"
    @refresh-list="() => getTableList()"
    @create-group="handleCommand('create')"
  />
  <div class="flex flex-col justify-between bg-white table-content">
    <el-table
      v-loading="loading"
      class="basic-table"
      height="100%"
      :data="dataSource"
      row-key="id"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column
        prop="name"
        show-overflow-tooltip
        label="分组名称"
        min-width="158"
      />
      <el-table-column
        prop="node_num"
        show-overflow-tooltip
        label="关联节点数量"
        min-width="169"
      >
        <template #default="{ row }">
          <span class="text-[#3478F6]">{{ row.node_num }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="remark"
        show-overflow-tooltip
        label="备注"
        min-width="354"
      >
        <template #default="{ row }">
          <span>{{ row.remark || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="order"
        show-overflow-tooltip
        label="排序"
        min-width="126"
      />
      <el-table-column prop="created_at" label="创建日期" min-width="196">
        <template #default="{ row }">
          <!-- mock 数据需要转换 所以除以1000 -->
          {{ formatUnix(Number(row.created_at)) }}
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="134">
        <template #default="{ row }">
          <div class="flex items-center justify-around">
            <el-link
              class="common-btn"
              :underline="false"
              type="primary"
              @click="handleCommand('edit', row)"
              >编辑</el-link
            >
            <el-link
              class="common-btn"
              :underline="false"
              type="danger"
              @click="handleCommand('delete', row)"
              >删除</el-link
            >
            <el-link
              class="common-btn"
              :underline="false"
              type="primary"
              @click="handleCommand('more', row)"
            >
              <el-dropdown trigger="click">
                <el-button type="primary" link class="common-btn"
                  >更多
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu class="w-[128px]">
                    <el-dropdown-item
                      class="pl-6 text-[#F15443]"
                      @click="handleCommand('delete', row.id)"
                      >删除</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </template>
              </el-dropdown></el-link
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <BasicPagination
      ref="paginationRef"
      :total="total"
      :disabled="loading"
      @change="getTableList"
    ></BasicPagination>
    <EditorDialog
      :visible="status_state.visible"
      :node-list="nodeList"
      :record="status_state.record"
      @close-dialog="() => (status_state.visible = false)"
      @refresh-table="() => getTableList()"
    />
  </div>
</template>
<script lang="ts" setup>
import { get, isFunction } from 'lodash-es'
import GroupOperationBar from './GroupOperationBar.vue'
import { formatUnix } from '@/utils'
import EditorDialog from './EditorDialog.vue'
import { ElMessageBox, ElNotification } from 'element-plus'
import { groupMultipleSelection, groupState } from '../state'
import type { NodeData, NodeGroupData } from '@/apis/model/node'
import { omit } from 'lodash-es'
const router = useRouter()
const paginationRef = ref()
const loading = ref<boolean>(false)
const dataSource = ref<NodeGroupData[]>([])
const total = ref(0)
interface IStatus {
  record: any
  visible: boolean
  isUpdate: boolean
}
const status_state = reactive<IStatus>({
  record: {} as any,
  visible: false,
  isUpdate: false
})

//勾选事件
const handleSelectionChange = (row: NodeGroupData[]) => {
  groupMultipleSelection.value = row.map(item => (item.id as string) ?? '')
}
const editorState = reactive<CommonDialog<any>>({
  visible: false,
  record: undefined,
  loading: false
})
type ICommand =
  | 'detail'
  | 'edit'
  | 'delete'
  | 'create'
  | 'create_dialog'
  | 'editor_dialog'
  | 'more'
const handleCommand = (command: ICommand, record?: any) => {
  const actions: Record<ICommand, () => void> = {
    create: (): void => {
      getNodeList()
      status_state.visible = true
      status_state.record = null
    },
    edit: (): void => {
      getNodeList()
      status_state.visible = true
      status_state.record = record
    },
    detail: (): void => {
      router.push({ name: 'AdminDetailExample', params: { id: record?.id } })
    },
    delete: (): void => {
      ElMessageBox.confirm('确定要删除该节点吗？', '删除节点', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        customClass: 'basic-message-box'
      }).then(() => {
        delete_single_group({ id: record.id })
          .then(() => {
            ElNotification.success({
              title: '成功',
              message: '删除成功'
            })
          })
          .finally(() => {
            getTableList()
          })
      })
    },
    create_dialog: (): void => {
      editorState.record = undefined
      editorState.visible = true
      editorState.loading = false
    },
    editor_dialog: (): void => {
      editorState.record = record
      editorState.visible = true
      editorState.loading = false
    },
    more: (): void => {}
  }
  if (isFunction(get(actions, command))) {
    actions[command]()
  }
}
const nodeList = ref<NodeData[]>([])
const getNodeList = () => {
  loading.value = true
  node_list({})
    .then(res => {
      nodeList.value = res?.list ?? []
    })
    .finally(() => {
      loading.value = false
    })
}
//获取节点分组列表
const getTableList = (params = {}) => {
  const query = {
    ...omit({ ...groupState, ...params }, ['page'])
  }
  loading.value = true
  node_group({ ...query })
    .then(res => {
      dataSource.value = res?.list ?? []
      total.value = +res?.total ?? 0
      getNodeList()
    })
    .finally(() => {
      setTimeout(() => {
        loading.value = false
      }, 200)
    })
}
defineExpose({ getTableList })
</script>

<style lang="scss" scoped>
.table-content {
  height: calc(100% - 125px);
}
:deep(.el-form-item__label) {
  font-size: 12px;
  color: #000;
  font-weight: 600;
}
:deep(.el-transfer) {
  display: flex;
  width: 100%;
  .el-transfer__buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0 16px;
    .el-transfer__button {
      width: 40px;
    }
    .el-transfer__button:nth-child(2) {
      margin: 10px 0;
    }
  }
  .el-checkbox__label {
    font-size: 12px !important;
  }
}
</style>
